<template>
<!-- 回款列表详情组件 -->
  <div class="ReceivableDetail">
       <zm-form :model="searchForm" ref="searchFormRef" inline size="small">
            <zm-form-item label prop="orderNum">
                <zm-input v-model="searchForm.returnedNo" placeholder="回款单号、销售单号"></zm-input>
            </zm-form-item>
            <zm-form-item label prop="customerName">
                <zm-input v-model="searchForm.customerName" placeholder="关联客户"></zm-input>
            </zm-form-item>
            <zm-form-item label>
                <zm-button @click="onSearch" t="search">查询</zm-button>
                <zm-button @click="onReset" t="reset">重置</zm-button>
            </zm-form-item>
             <zm-table-data
                stripe height="500"
                :data="tableParams.data"
                :columns="receivableDetailsList"
                :fetch="loadList"
                :table-params="tableParams"
                :show-page="false"
            />
            <detail-container
            v-if="extendDetailParams.visible"
            v-model="extendDetailParams.visible"
            :id="extendDetailParams.id"
            :business-id="extendDetailParams.id"
            :is-show-btn="false"
            :type="extendDetailParams.type"
          />
</zm-form>
  </div>
</template>

<script>
import {receivableDetailsList} from './const.js'
import {getPageList} from '@/api/src/returnedMoney'
import tableMixin from '@/mixins/zmTableMixin'
import DetailContainer from '@/components/DetailContainer'
export default {
  name: 'ReceivableDetail',
  components: {DetailContainer},
  mixins: [tableMixin],
  props: {
    month: {
      type: String,
      required: true
    },
    infoObj: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      searchForm: {
        returnedNo: '', // 回款单号或销售单号
        customerName: '' // 关联客户
      },
      extendDetailParams: {
        visible: false,
        id: '',
        type: '',
        obj: {}
      }
    }
  },
  computed: {
    receivableDetailsList () {
      return receivableDetailsList(this) // const.js 需要用到 infoObj.status
    }
  },
  created () {

  },
  methods: {
    async loadList () {
      let _res = await getPageList({...this.searchForm, month: this.month, listType: '2', salesmanId: this.infoObj.salemanId})
      this.initialTableData(_res.list)
    },
    initialTableData (dataList, totalCount) {
      const tableParams = this.tableParams
      tableParams.total = totalCount || 0
      tableParams.data = dataList
    },
    onReset () {
      if (this.$refs.searchFormRef) {
        this.$refs.searchFormRef.resetFields()
        this.searchForm.returnedNo = ''
        this.searchForm.customerName = ''
        this.onSearch()
      }
    },
    onExtendShow (id, type) {
      this.extendDetailParams = {
        visible: true,
        id: id,
        businessId: id,
        type: type
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
